<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<ng-form name="vm.dataProcessingForm">
  <div layout="row">


    <card-layout body-css="md-padding" flex="70">
      <header-section>
        <div layout="row" layout-align="space-between-center" flex>
          <div class="card-title" flex>数据处理</div>
          <h2 class="card-sub-header">{{vm.stepNumber}} of {{vm.totalSteps}}</h2>
        </div>
        <div layout="row" layout-align="space-between-center" flex class="layout-padding-top">
          <div class="card-sub-header" flex>定义字段验证、标准化和清理策略</div>
          <thinkbig-feed-errors-card-header></thinkbig-feed-errors-card-header>
        </div>

      </header-section>
      <body-section md-content class="data-processing">

        <md-expansion-panel-group>
          <md-expansion-panel md-component-id="panelFieldPolicies">
            <md-expansion-panel-collapsed>
              <div flex class="md-subhead layout-padding-top">
                <span>选择现场策略</span>
              </div>
              <md-button aria-label="Expand panel" class="md-info" ng-click="$panel.collapse()">扩展</md-button>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
              <md-expansion-panel-header md-no-sticky>
                <div class="md-subhead layout-padding">字段策略</div>
              </md-expansion-panel-header>
              <md-expansion-panel-content>
                <md-list layout-fill class="list-item-table list-condensed" id="policy-list">

                  <md-list-item>
                    <div layout="row" layout-fill>
                      <div flex="30" class="md-list-item-text hint">
                        字段名称
                      </div>
                      <div flex="20" class="md-list-item-text hint" style="padding-left:5px;">
                        域类型
                      </div>
                      <div flex="10" class="md-list-item-text hint" layout="column" layout-align="start center">
                        索引
                        <md-tooltip md-direction="top">
                          指定用于搜索和发现的全局索引的字段
                        </md-tooltip>
                        <md-input-container class="md-block" flex-gt-sm>
                          <md-checkbox aria-label="Select All"
                                       ng-checked="vm.indexCheckAll.isChecked"
                                       md-indeterminate="vm.indexCheckAll.isIndeterminate"
                                       ng-click="vm.indexCheckAll.toggleAll()"></md-checkbox>
                        </md-input-container>
                      </div>
                      <div flex="10" class="md-list-item-text hint" layout="column" layout-align="start center">
                        简况
                        <md-tooltip md-direction="top">
                          这个领域应该被描述？
                        </md-tooltip>
                        <md-input-container class="md-block" flex-gt-sm>
                          <md-checkbox aria-label="Select All"
                                       ng-checked="vm.profileCheckAll.isChecked"
                                       md-indeterminate="vm.profileCheckAll.isIndeterminate"
                                       ng-click="vm.profileCheckAll.toggleAll()">
                          </md-checkbox>
                        </md-input-container>
                      </div>
                      <div flex="30" class="md-list-item-text hint" style="padding-left:5px;">
                        规范与验证
                      </div>
                    </div>
                  </md-list-item>
                  <div layout="row" layout-fill flex>
                    <span class="data-processing-divider" style="margin-top:-10px;" layout-fill flex>
                      <md-divider style="border-top-color:grey"></md-divider>
                    </span>
                  </div>
                  <div id="define-feed-data-processing-container">
                    <div ng-repeat="policy in vm.model.table.fieldPolicies" layout="row"
                         ng-show="!vm.model.table.tableSchema.fields[$index].deleted"
                         ng-click="vm.onSelectedColumn($index)"
                         class="data-processing-row"
                    >

                      <div flex="30" class="md-list-item-text">
                        <md-input-container class="md-block" flex-gt-sm>
                          <div>{{policy.name | characters:30}}</div>
                          <div class="hint">{{policy.field.dataTypeDisplay}}</div>
                        </md-input-container>
                      </div>
                      <div flex="20" class="md-list-item-text " style="padding-left:5px;">
                        <md-input-container class="md-block md-dense condensed" flex-gt-sm>
                          <md-select ng-model="policy.domainTypeId" placeholder="Domain Type" ng-disabled="policy.field.complex" ng-change="vm.onDomainTypeChange(policy)">
                            <md-option ng-value=""><em>None</em></md-option>
                            <md-option ng-repeat="domainType in vm.availableDomainTypes | orderBy:'title' track by $index" ng-value="domainType.id" aria-label="{{domainType.title}}">
                              <ng-md-icon icon="{{domainType.icon}}" ng-style="{'fill':domainType.iconColor}"></ng-md-icon> {{domainType.title}}
                            </md-option>
                          </md-select>
                        </md-input-container>
                      </div>
                      <div flex="10" class="md-list-item-text " layout="column" layout-align="start center">
                        <md-input-container class="md-block" flex-gt-sm>
                          <md-checkbox flex-gt-sm ng-model="policy.index" aria-label="Index" ng-disabled="policy.field.complex" ng-click="vm.indexCheckAll.clicked(!policy.index)">
                          </md-checkbox>
                        </md-input-container>
                      </div>
                      <div flex="10" class="md-list-item-text " layout="column" layout-align="start center">
                        <md-input-container class="md-block" flex-gt-sm>
                          <md-checkbox flex-gt-sm ng-model="policy.profile" aria-label="Profile" ng-disabled="policy.field.complex" ng-click="vm.profileCheckAll.clicked(!policy.profile)">
                          </md-checkbox>
                        </md-input-container>
                      </div>
                      <!--  rules -->
                      <div flex="30" class="md-list-item-text hint" layout-align="start center">
                        <div style="color:rgba(0, 0, 0, 0.54)" ng-if="policy.field.dataTypeDescriptor.complex">
                          <md-button class="icon-btn" style="padding-left:2px;padding-right:2px;" ng-disabled="true">
                            <ng-md-icon icon="add_circle_outline"></ng-md-icon>
                          </md-button>
                          添加
                        </div>

                        <div style="color:#2D78B1" ng-click="vm.showFieldRuleDialog(policy)" ng-if="!policy.field.dataTypeDescriptor.complex">
                          <md-button class="icon-btn" style="padding-left:2px;padding-right:2px;">
                            <ng-md-icon icon="add_circle_outline" style="fill:#2D78B1;"></ng-md-icon>
                          </md-button>
                          添加
                        </div>
                        <div ng-if="(policy.standardization != null && policy.standardization.length >0 || policy.validation != null && policy.validation.length >0)"
                             class="orange layout-padding-bottom" style="padding-left:32px;" layout="column">
                          <span ng-if="policy.standardization != null && policy.standardization.length >0">{{policy.standardization.length}} Standardizers</span>
                          <span ng-if="policy.validation != null && policy.validation.length >0">{{policy.validation.length}} Validators</span>
                        </div>
                      </div>

                    </div>
                  </div>
                </md-list>
              </md-expansion-panel-content>
              <md-expansion-panel-footer md-no-sticky>
                <div flex></div>
                <md-button class="md-warn" aria-label="Collapse panel" ng-click="$panel.collapse()">折叠</md-button>
              </md-expansion-panel-footer>
            </md-expansion-panel-expanded>
          </md-expansion-panel>

          <md-expansion-panel md-component-id="panelMergeStrategy">
            <md-expansion-panel-collapsed>
              <div flex class="md-subhead layout-padding-top">
                <span>选择合并策略 </span>
              </div>
              <md-button aria-label="Expand panel" class="md-info" ng-click="$panel.collapse()">扩展</md-button>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
              <md-expansion-panel-header md-no-sticky>
                <div class="md-subhead layout-padding">合并策略</div>
              </md-expansion-panel-header>
              <md-expansion-panel-content>
                <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
                  <label class="label-small md-container-ignore">合并策略</label>
                  <md-radio-group ng-model="vm.model.table.targetMergeStrategy" layout="row" layout-wrap="true" class="layout-padding-top" name="targetMergeStrategy"
                                  ng-change="vm.onChangeMergeStrategy()">
                    <md-radio-button ng-repeat="strategy in vm.mergeStrategies"
                                     ng-value="strategy.type"
                                     aria-label="{{strategy.name}}"
                                     ng-disabled="strategy.disabled">
                      {{strategy.name}}
                      <div class="hint">{{strategy.hint}}</div>
                    </md-radio-button>
                  </md-radio-group>
                  <div ng-messages="vm.dataProcessingForm['targetMergeStrategy'].$error" md-auto-hide="false">
                    <div ng-message="invalidPKOption">A primary key must be selected to use this strategy</div>
                    <div ng-message="invalidRollingSyncOption">A Partition must be added to use this strategy</div>
                  </div>

                </md-input-container>
              </md-expansion-panel-content>
              <md-expansion-panel-footer md-no-sticky>
                <div flex></div>
                <md-button class="md-warn" aria-label="Collapse panel" ng-click="$panel.collapse()">折叠</md-button>
              </md-expansion-panel-footer>
            </md-expansion-panel-expanded>
          </md-expansion-panel>


          <md-expansion-panel md-component-id="panelTargetFormat">
            <md-expansion-panel-collapsed>
              <div flex class="md-subhead layout-padding-top">
                <span>选择目标格式 </span>
              </div>
              <md-button aria-label="Expand panel" class="md-info" ng-click="$panel.collapse()">扩展</md-button>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
              <md-expansion-panel-header md-no-sticky>
                <div class="md-subhead layout-padding">Target Format</div>
              </md-expansion-panel-header>
              <md-expansion-panel-content>


                <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
                  <label class="label-small md-container-ignore">Target Format</label>
                  <md-select ng-model="vm.model.table.targetFormat" ng-change="vm.onTableFormatChange(opt);">
                    <md-option ng-repeat="opt in vm.targetFormatOptions track by $index" ng-value="opt.value">
                      {{opt.label}}
                    </md-option>
                  </md-select>
                </md-input-container>


                <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
                  <label class="label-small md-container-ignore">Compression Options</label>
                  <md-select ng-model="vm.model.table.options.compressionFormat">
                    <md-option ng-repeat="opt in vm.compressionOptions track by $index" ng-value="opt">
                      {{opt}}
                    </md-option>
                  </md-select>
                </md-input-container>

              </md-expansion-panel-content>
              <md-expansion-panel-footer md-no-sticky>
                <div flex></div>
                <md-button class="md-warn" aria-label="Collapse panel" ng-click="$panel.collapse()">折叠</md-button>
              </md-expansion-panel-footer>
            </md-expansion-panel-expanded>
          </md-expansion-panel>
        </md-expansion-panel-group>

        <thinkbig-step-buttons can-continue="vm.isValid" step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>

      </body-section>

    </card-layout>

    <card-layout flex="30" body-css="md-padding" ng-if="vm.selectedColumn != null" sticky scroll-selector="#content" style="width:100%;right:10px;" id="selectedColumnPanel2">

      <header-section>
        <div class="card-title" flex>Field Details</div>
        <div layout="column" class="layout-padding-top-bottom">
          <span class="item-title orange">{{vm.selectedColumn.name}}</span>
        </div>
      </header-section>

      <body-section>
        <div layout="column" class="layout-padding-top-bottom">
          <span>示例字段值</span>
          <span class="hint"> <md-input-container class="md-block condensed" flex-gt-sm>
                      <md-select ng-model="vm.selectedColumn.selectedSampleValue" placeholder="Preview Data">
                        <md-option ng-repeat="data in vm.selectedColumn.sampleValues | unique" value="{{data}}" aria-label="{{data}}">
                          {{data}}
                        </md-option>
                      </md-select>
                    </md-input-container></span>
        </div>

        <div layout="column" class="layout-padding-top">
          <div layout="column" class="layout-padding-top-bottom">
            <span>字段描述</span>
            <textarea ng-model="vm.selectedColumn.description" rows="5" md-select-on-focus="" maxlength="256"></textarea>
          </div>
        </div>

        <md-input-container class="md-block layout-padding-top-bottom flex-gt-xs" flex-gt-xs>
          <label class="label-small md-container-ignore">Tags</label>
          <md-chips ng-model="vm.selectedColumn.tags" md-autocomplete-snap md-transform-chip="vm.transformChip($chip)" md-require-match="false">
            <md-autocomplete md-selected-item="vm.tagChips.selectedItem" md-search-text="vm.tagChips.searchText" md-items="item in vm.feedTagService.querySearch(tagChips.searchText)"
                             md-item-text="item.name" placeholder="添加标签">
              <span md-highlight-text="vm.tagChips.searchText">{{item.name}}</span>
            </md-autocomplete>
            <md-chip-template>
              <span>
                <strong>{{$chip.name}}</strong>
              </span>
            </md-chip-template>
          </md-chips>
        </md-input-container>

        <div layout="column" class="layout-align-start-start layout-padding-top-bottom">
          <md-button aria-label="Remove field" ng-click="vm.removeColumnUsingReference(vm.selectedColumn)" aria-label="Remove Field"
                     ng-if="!vm.tableLocked && vm.model.table.method != 'SAMPLE_FILE'">Remove
          </md-button>
        </div>
      </body-section>
    </card-layout>
  </div>
</ng-form>
